<template>

  <div class="mx">
    <van-nav-bar
      title="作业详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft()"
    ></van-nav-bar>
    <div class="card">
      <div class="classname"><b>
        <van-icon name="description"></van-icon>
        <b class="setcname">网页制作</b></b></div>
      <div><b>
        <van-icon name="question" class="sicon"></van-icon>
      </b><font class="setcname">马巧梅 18235462547</font></div>
      <div>
        <van-icon name="clock" class="sicon"></van-icon>
        <font class="setcname">2018-2-28</font></div>
    </div>
    <div class="card">
      <div v-for="tab in blanks">
        <li>{{tab.title}}<br></li>
        <div v-if="!isDone">
          <el-input
            type="textarea"
            :rows="1"
            placeholder="多个空每个空均使用一个【】分开"
            v-model="tab.blankContent" @blur="addBlank(tab.id,tab.blankContent)">
          </el-input>
        </div>
        <div v-if="isDone">
          {{tab.answer}}
        </div>
      </div>
      <div v-for="tab in choices">
        <li>{{tab.title}}<br/>
          <el-radio-group v-model="tab.sectionId" @change="selection(tab.sectionId,tab.id)">
            <el-radio label="1">A.{{tab.sectionA}}</el-radio>
            <br/>
            <el-radio label="2">B.{{tab.sectionB}}</el-radio>
            <br/>
            <el-radio label="3">C.{{tab.sectionC}}</el-radio>
            <br/>
            <el-radio label="4">D.{{tab.sectionD}}</el-radio>
            <br/>
          </el-radio-group>
          <div v-if="isDone">
            {{tab.answer}}
          </div>
        </li>
      </div>
      <div v-for="tab in multipleChoice">
        <li>{{tab.title}}<br/>
          <el-radio-group v-model="tab.isSelected" @change="selection(tab.isSelected,tab.id)">
            <el-radio label="1">A.{{tab.sectionA}}</el-radio>
            <br/>
            <el-radio label="2">B.{{tab.sectionB}}</el-radio>
            <br/>
            <el-radio label="3">C.{{tab.sectionC}}</el-radio>
            <br/>
            <el-radio label="4">D.{{tab.sectionD}}</el-radio>
            <br/>
          </el-radio-group>
        </li>
      </div>
      <div v-for="tab in trueOrFalse">
        <li>{{tab.title}}<br></li>
      </div>
      <div v-for="tab in ans">
        <li>{{tab.title}}<br></li>
        <div v-if="!isDone">
          <el-input
            type="textarea"
            :rows="1"
            placeholder="多个空每个空均使用一个【】分开"
            v-model="tab.ansConent" @blur="addAns(tab.id,tab.ansConent)">
          </el-input>
        </div>
        <div v-if="isDone">
          here is answer
        </div>

      </div>
      <div v-for="tab in drawingQuestion">
        <li>{{tab.title}}<br></li>
      </div>
      <div v-for="tab in code">
        <li>{{tab.title}}<br></li>
        <textarea class="textarea-item" name="codecontent" placeholder="请输入文本作答内容"
                  spellcheck="false">
        </textarea>
      </div>
      <div class='textarea-wrapper'>
        <el-upload class="answers" action="http://localhost:8085/file/upload"  :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
          <el-button type="primary">上传文件</el-button>
          <!--<van-button size="large" type="default">上传文件</van-button>-->
        </el-upload>
        <el-button type="success" class="nonono" @click="dialogVisible = true">提交作业</el-button>
        <!--<van-button size="large" type="primary" @click="dialogVisible = true">提交</van-button>-->
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose">
        <span>是否确定提交？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="visible=true;dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="visible"
        width="70%"
        :before-close="handleClose">
        <span>已经提交成功！</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
  import NavTabBar from "./NavTabBar";
  import "vant/lib/vant-css/icon-local.css";

  export default {
    name: "index",
    data() {
      return {
        images: [
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg",
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg",
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg",
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg"
        ],
        textarea: "",
        result: {
          studentId:
            782,
          pageId:
            2,
          answer:
            []
        },
        active: 2,
        noticeIcon:
          "./../assets/notice.png",
        code: [
          {id: 0},
          {title: ""},
          {num: 0},
          {codeContent: ""}
        ],
        ans: [
          {title: ""},
          {content: ""},
          {id: 0},
          {ansConent: ""},
          {sectionId: 0}
        ],
        blanks: [
          {blankNum: ""},
          {title: ""},
          {id: 0},
          {blankContent: ""},
          {sectionId: 0},
          {tips: ""},
          {content: ""},
          {answer:""}
        ],
        drawingQuestion: [],
        multipleChoice: [
          {id: 0},
          {title: ""},
          {sectionA: ""},
          {sectionB: ""},
          {sectionC: ""},
          {sectionD: ""},
          {isSelected: ""}
        ],
        choices: [
          {score: 0},
          {id: 0},
          {sectionId: 0},
          {title: ""},
          {sectionA: ""},
          {sectionB: ""},
          {sectionC: ""},
          {sectionD: ""},
          {isChoice: "x"},
          {answer:""}
        ],
        trueOrFalse: [],
        result: {
          studentId: 0,
          pageId: 0,
          answer: []
        },
        isactive: false,
        pageId: 0,
        classId: 0,
        dialogVisible: false,
        visible: false,
        blAns: [],
        seAns: [],
        shAns: [],
        isDone: false
      };
    },
    components: {NavTabBar},
    mounted() {
      this.init()
    },
    methods: {
      init: function () {
        this.classId = this.$route.query.classId;
        this.result.pageId = this.$route.query.pageId;
        this.isDone = this.$route.query.isDone;
        if (this.isDone) {
          this.$router.push({
            path: '/doneMsg',
            query: {
              pageId: this.result.pageId
            }
          })
        }
        this.$http.get('page/onePage', {
          params: {
            'pageId': this.result.pageId,
            'classId': this.classId
          }
        })
          .then(res => {
            this.code = res.data.data.codeQuestion;
            this.ans = res.data.data.ansQuestion;
            this.drawingQuestion = res.data.data.drawingQuestion;
            this.blanks = res.data.data.blank;
            this.multipleChoice = res.data.data.multipleChoice;
            this.choices = res.data.data.signChoice;
            this.trueOrFalse = res.data.data.trueOrFalse;
          });

      },
      onClickLeft: function () {
        this.$router.push({path: '/index'})
      },
      selection: function (selection, id) {
        let ans = "";
        const self = this;
        switch (selection) {
          case "1":
            ans = "【A】";
            break;
          case "2":
            ans = "【B】";
            break;
          case "3":
            ans = "【C】";
            break;
          case "4":
            ans = "【D】";
            break;
        }
        // console.log(ans)
        for (let i = 0; i < this.choices.length; i++) {
          if (id === this.choices[i].id) {
            this.choices[i].isChoice = ans;
            // 刷新数据
          }
        }
        let flag = 0;
        for (let i = 0; i < this.result.answer.length; i++) {
          if (this.result.answer[i].id === id) {
            this.result.answer.splice(i, 1, {id: id, ans: ans});
            flag = 1;
          }
        }
        if (flag === 0 || this.result.answer.length === 0) {
          this.result.answer.push({id: id, ans: ans});
        }
        this.isactive = true;
      },
      f: function () {
        for (let i = 0; i < this.choices.length; i++) {
          this.choices[i].sectionId = this.choices[i].id;
        }
        for (let i = 0; i < this.blanks.length; i++) {
          this.blanks[i].blankContent = this.blanks[i].id;
        }
        for (let i = 0; i < this.ans.length; i++) {
          this.ans[i].ansConent = this.ans[i].id;
        }
        for (let i = 0; i < this.code.length; i++) {
          this.code[i].codeContent = this.code[i].id;
        }
      },
      addBlank: function (pid, answer) {
        let flag = 0;
        for (let i = 0; i < this.result.answer.length; i++) {
          if (this.result.answer[i].id === pid) {
            this.result.answer.splice(i, 1, {id: pid, ans: answer});
            flag = 1;
          }
        }
        if (flag === 0 || this.result.answer.length === 0) {
          this.result.answer.push({id: pid, ans: answer});
        }
      },
      addAns: function (pid, answer) {
        let flag = 0;
        for (let i = 0; i < this.result.answer.length; i++) {
          if (this.result.answer[i].id === pid) {
            this.result.answer.splice(i, 1, {id: pid, ans: answer});
            flag = 1;
          }
        }
        if (flag === 0 || this.result.answer.length === 0) {
          this.result.answer.push({id: pid, ans: answer});
        }
      },
      addCode: function (pid, answer) {
        console.log("code is " + answer);
        let flag = 0;
        for (let i = 0; i < result.answer.length; i++) {
          if (this.result.answer[i].id === pid) {
            this.result.answer.splice(i, 1, {id: pid, ans: answer});
            flag = 1;
          }
        }
        if (flag === 0 || this.result.answer.length === 0) {
          this.result.answer.push({id: pid, ans: answer});
        }
      },
      onCmCodeChange: function (newCode) {
        console.log("this is new code", newCode);
        this.codes = newCode;
      },
      post: function () {
        if (this.code.length !== 0) {
          let flag = 0;
          for (let i = 0; i < this.result.answer.length; i++) {
            if (this.result.answer[i].id === this.code[0].id) {
              this.result.answer.splice(i, 1, {
                id: this.code[0].id,
                ans: this.codes
              });
              flag = 1;
            }
          }
          if (flag === 0 || this.result.answer.length === 0) {
            this.result.answer.push({id: this.code[0].id, ans: this.codes});
          }
        }
        console.log(this.result.answer);
        this.result.studentId = JSON.parse(
          window.localStorage.getItem("user")
        ).id;
        this.$http.post('page/addAns', {
          result: this.result
        }, {
          emulateJSON: true
        })
          .then(res => {
            console.log(res);
            if (res.data.code === 200) {
              // this.dialogVisible = true;
              this.$confirm("答案已经提交,请等待评测结果")
                .then(_ => {
                  console.log("这是提交成功后");
                  this.$router.push({
                    path: "/index",
                    query: {studentId: this.result.studentId}
                  });
                })
                .catch(_ => {
                  console.log("这是提交成功后");
                  this.$router.push({
                    path: "/index",
                    query: {studentId: this.result.studentId}
                  });
                });
            } else {
              this.$notify.error({
                title: "错误",
                message: "你已经提交过答案，请勿重复提交！"
              });
            }
          })
          .catch(err => {
            this.$notify.error({
              title: "错误",
              message: "你已经提交过答案，请勿重复提交！"
            });
            console.log(err);
          });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${
            files.length
            } 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }

    }

  };


</script>

<style scoped>
  .card {
    padding-top: 8px;
    padding-left: 15px;
    padding-bottom: 7px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 9px;
    margin-top: 5px;
    color: rgb(100, 100, 100);
  }

  .classname {
    padding: 0 0 3px 0;
    font-size: 20px;
  }

  .setcname {
    padding-left: 5px;
  }

  .sicon {
    color: rgb(22, 145, 216);
  }

  .textarea-wrapper {
    align-content: center;
    /*margin-left: 5%;*/
    /*margin-right: 5%;*/
    width: 95%;
    margin-top: 15px;
  }

  .textarea-item {
    width: 90%;
    height: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    resize: none;
    color: #aaa;
    margin-top: 5px;
    border-radius: 3px;
  }

  el-input {
    /*width: 95%;*/
    margin-right: 5%;
  }

  .answers {
    float: left;
  }

  .nonono {
    float: right;
  }
</style>
